<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html >
<head>
<meta charset="UTF-8">
<title>个人主页</title>
	<link rel="stylesheet" href="${ctx }/css/layui.css" media="all" />
	<link rel="stylesheet" href="${ctx }/css/public.css" media="all" />
<link rel="stylesheet" href="${ctx}/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="${ctx}/lib/bootstrap/css/bootstrap-fileinput.css">
<script src="${ctx}/lib/jquery.min.js"></script>
<script src="${ctx}/lib/bootstrap/js/bootstrap.min.js"/>
<script src="${ctx}/lib/bootstrap/js/bootstrap-fileinput.js"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>


	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

	<script type="text/javascript">
	</script>



</head>

<body>
<form id="form1" class="form-horizontal" onsubmit="return false" role="form" style="padding: 30px 100px 10px">
	<fieldset>
		<legend>个人信息修改</legend>
	</fieldset>
	<div class="form-group">
		<label class="control-label col-sm-2" for="docname">姓名</label>
		<div class="col-sm-4">
			<input class="form-control" name="docname" value="${doctor.docname}" id="docname" type="text" readonly>
		</div>
	</div>
	<div class="form-group">
		<label class="control-label col-sm-2" for="phone">手机</label>
		<div class="col-sm-4">
			<input class="form-control" name="phone" value="${doctor.phone}" id="phone" type="text">
		</div>
	</div>

	<div class="form-group">
		<label class="control-label col-sm-2" >性别</label>
		<div class="col-sm-4">
			<c:if test="${doctor.docsex==2}">
				<input  name="docsex" id="optionsRadios1" value="2" type="radio" checked>男&nbsp;&nbsp;&nbsp;
				<input  name="docsex" id="optionsRadios2" value="1" type="radio" >女
			</c:if>
			<c:if test="${doctor.docsex==1}">
				<input  name="docsex" id="optionsRadios1" value="2" type="radio" >男&nbsp;&nbsp;&nbsp;
				<input  name="docsex" id="optionsRadios2" value="1" type="radio" checked>女
			</c:if>


		</div>
	</div>


    <div class="form-group">
        <label class="control-label col-sm-2" for="phone">科室</label>
        <div class="col-sm-4">
            <select class="selectpicker show-tick form-control"  data-live-search="true" name="department" id="department">
                <option value="">请选择科室</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="phone">职位</label>
        <div class="col-sm-4">
            <select class="selectpicker show-tick form-control"  data-live-search="true" name="jobtitle" id="jobtitle">
                <option value="">请选择职位</option>
            </select>
        </div>
    </div>

	<%--<div class="form-group">
		<label class="control-label col-sm-2" for="password">所属科室:</label>
		<div class="col-sm-4">
			<input class="form-control" name="password" id="password" type="text">
		</div>
	</div>

	<div class="form-group">
		<label class="control-label col-sm-2" for="conpsw">职位</label>
		<div class="col-sm-4">
			<input class="form-control" name="conpsw" id="conpsw" type="text">
		</div>
	</div>

	<div class="form-group">
		<label class="control-label col-sm-2" >简介:</label>
		<div class="col-sm-4">
			<input class="form-control" name="username" id="jj" type="text">
		</div>
	</div>
--%>

	<div class="form-group">
		<label class="control-label col-sm-2" >入职时间:</label>
		<div class="col-sm-4">

			<input readonly class="form-control" value="<fmt:formatDate type="both" value="${doctor.entrytime}" />" >
		</div>
	</div>


	<div class="form-group">
		<div class="col-sm-4 col-sm-offset-2">
			<input type="hidden" id ="photo" name="photo" value="">
			<button id="tijiao" class="btn btn-warning" style="width:290px;">立即修改</button>
		</div>
	</div>
	</div>
	<div>
		<div style="position: relative;border: 5px solid lightblue;width: 100px;height:100px;margin: 5px 230px;border-radius: 50%;">
			<c:if test="${doctor.photo.length()>5}">
				<img src="${doctor.photo}" alt="选择并上传头像" id="avatar_img" style="width: 90px;height: 90px;left:0;top: 0;border-radius: 50%;"/>
			</c:if>
		<c:if test="${empty doctor.photo || doctor.photo}">
			<img src="../images/user1.png" alt="选择并上传头像" id="avatar_img" style="width: 90px;height: 90px;left:0;top: 0;border-radius: 50%;"/>
		</c:if>
			<input type="file" id="avatar_file" name="avatar_file"
				   style="width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;"/>
		</div>
		<br/>
	</div>
</form>
</body>
<script>


    //获取下拉科室列表
        $.ajax({
            url: "/findKeshi",//写你自己的方法，返回map，我返回的map包含了两个属性：data：集合，total：集合记录数量，所以后边会有data.data的写法。。。
            type: "post",
            dataType: "json",
            data: 'data',
            success: function (data) {
                $.each(data.data, function (i) {
                    if(data.data[i].kid ==data.depa){
                    $('#department').append("<option selected='selected' value=" + data.data[i].kid + ">" + data.data[i].kname + "</option>");
                    }else{
                        $('#department').append("<option value=" + data.data[i].kid + ">" + data.data[i].kname + "</option>");

                    }
                });
            },

            error: function (data) {
                alert("查询学校失败" + data);
            }
        })

    //获取下拉角色列表
    $.ajax({
        url: "/findRole",//写你自己的方法，返回map，我返回的map包含了两个属性：data：集合，total：集合记录数量，所以后边会有data.data的写法。。。
        type: "post",
        dataType: "json",
        data: 'data',
        success: function (data) {
            $.each(data.roles, function (i) {
                if(data.roles[i].rid ==data.roleId){
                    $('#jobtitle').append("<option selected='selected' value=" + data.roles[i].rid + ">" + data.roles[i].rname + "</option>");
                }else{
                    $('#jobtitle').append("<option value=" + data.roles[i].rid + ">" + data.roles[i].rname + "</option>");

                }
            });
        },

        error: function (data) {
            alert("查询职位失败" + data);
        }
    })

    $('#tijiao').click(function(){
        $.ajax({
            url : "/userUpdate",
            type : "POST",
            data : $( '#form1').serialize(),  //对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
            success : function(data) {
				//window.location.reload()
                window.top.location.reload();
            },

            error : function(data) {
                alert('aaaa');
            }

        });
    });
    $("#avatar_file").change(function () {
        // 获取上传文件对象
        var file = $(this)[0].files[0];
        var fd = new FormData();
        fd.append('username', 'root')
        fd.append('file', file);

        // 读取文件URL
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // 阅读文件完成后触发的事件
        reader.onload = function () {
            // 读取的URL结果：this.result
            $("#avatar_img").attr("src", this.result);
            alert('vvvvv');
            $.ajax({
                url:'/photoUpload',
                type:'POST',
                data:fd,
                processData:false,  //tell jQuery not to process the data
                contentType: false,  //tell jQuery not to set contentType
                //这儿的三个参数其实就是XMLHttpRequest里面带的信息。
                success:function (data) {
                    alert(data.photo);
                    $("#avatar_img").attr("src", data.photo);
                    $("#photo").val(data.photo);
                }

            })
        }
    });
</script>
</html>
